import React, {useState} from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import moment from 'moment';
import '../index.less';
import {Calendar,Badge,Card,Descriptions,Row,Col,Input,Form,Button } from 'antd';

const colStyle = {xl: 8,lg: 8,md: 8,sm: 8,xs: 8};

const CalendarList = () => {

  const [info,setInfo] = useState({});
  const [form] = Form.useForm();

  const attendanceDate = [
    {
      date:'2020-12-5',
      state:0,//正常 green
    },
    {
      date:'2020-12-6',
      state:1,//迟到 yellow
    },
  ];

  const getListData = (value) => {
    let listData = [];
    attendanceDate?.map(item => {
      let date = item.date.split("-");
      //循环日期，拿value日期跟data里的数据日期做匹配
      if (value.date().toString() === date[2]) {
        switch (item.state) {
          case 0:
            listData = [
              {color: 'green', content: '正常'}
            ];
            break;
          case 1:
            listData = [
              {color: 'yellow', content: '迟到'}
            ];
            break;
          default:
        }
      }
    });
    return listData;
  };

  const dateCellRender = (value) => {
    const listData = getListData(value);;
    return (
      <ul className="events">
        {listData.map(item => (
          <li key={item.content}>
            <Badge status={item.color} text={item.content} />
          </li>
        ))}
      </ul>
    );
  };

  const onReset = () => {
    form.resetFields();
  };

  const onInit = (time) => {
    let values = {"date":moment(time).format('YYYY-MM'),"code":form.getFieldsValue().code};
    if(!values.code){ //不存在就直接跳出
      return;
    }
  };

  return (
    <PageHeaderWrapper>
      <Card style={{marginBottom: 24}} bordered={false}>
        <Form form={form} onFinish={onInit}>
          <Row gutter={24}>
            <Col {...colStyle}>
              <Form.Item name="code" label="工号" style={{marginBottom:0}}>
                <Input/>
              </Form.Item>
            </Col>
            <Col {...colStyle}/>
            <Col {...colStyle}>
              <Form.Item style={{textAlign: 'end',marginBottom:0}}>
                <Button style={{marginRight:'8px'}} htmlType="button" onClick={onReset}>
                  重置
                </Button>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>
      <Card style={{marginBottom: 24}} bordered={false}>
        <Descriptions>
          <Descriptions.Item label="工号">{info && info.code ? info.code : '暂无'}</Descriptions.Item>
          <Descriptions.Item label="姓名">{info && info.name ? info.name : '暂无'}</Descriptions.Item>
          <Descriptions.Item label="公司">{info && info.orgname ? info.orgname : '暂无'}</Descriptions.Item>
          <Descriptions.Item className='my-descriptions-bottom' label="部门">{info && info.unitname ? info.unitname : '暂无'}</Descriptions.Item>
          <Descriptions.Item className='my-descriptions-bottom' label="岗位">{info && info.jobname ? info.jobname : '暂无'}</Descriptions.Item>
          <Descriptions.Item className='my-descriptions-bottom' label="职级">{info && info.jobLevel ? info.jobLevel : '暂无'}</Descriptions.Item>
        </Descriptions>
      </Card>
      <Calendar dateCellRender={dateCellRender} onPanelChange={onInit} className='calendar-hide-year-month'/>
    </PageHeaderWrapper>
  )
};
export default (CalendarList);
